<template>
    <transition name="fade">
        <div :class="classes" :style="outerStyles" v-show="show">
            <div :class="innerClasses" :style="styles"></div>
        </div>
    </transition>
</template>
<script>
    const prefixCls = 'ivu-loading-bar';
    export default {
        props: {
            
        },
        data () {
            return {
                percent: 0,
                status: 'success',
                show: false,

                color: 'primary',
                failedColor: 'error',
                height: 2,


                timer:null
            };
        },
        computed: {
            classes () {
                return `${prefixCls}`;
            },
            innerClasses () {
                return [
                    `${prefixCls}-inner`,
                    {
                        [`${prefixCls}-inner-color-primary`]: this.color === 'primary' && this.status === 'success',
                        [`${prefixCls}-inner-failed-color-error`]: this.failedColor === 'error' && this.status === 'error'
                    }
                ];
            },
            outerStyles () {
                return {
                    height: `${this.height}px`
                };
            },
            styles () {
                let style = {
                    width: `${this.percent}%`,
                    height: `${this.height}px`
                };

                if (this.color !== 'primary' && this.status === 'success') {
                    style.backgroundColor = this.color;
                }

                if (this.failedColor !== 'error' && this.status === 'error') {
                    style.backgroundColor = this.failedColor;
                }

                return style;
            }
        },
        methods:{
            start () {
                if (this.timer) return;
                this.Initstart();
                let percent = 0;
                this.update({
                    percent: percent,
                    status: 'success',
                    show: true
                });
                let _this=this;
                this.timer = setInterval(() => {
                    percent += Math.floor(Math.random () * 3 + 1);
                    if (percent > 95) {
                        _this.clearTimer();
                    }
                    _this.update({
                        percent: percent,
                        status: 'success',
                        show: true
                    });
                }, 200);
            },
            Initstart()
            {
                document.body.appendChild(this.component.$el);
                const loading_bar = this.component.$el[0];
            },
            update (options) {
                if ('percent' in options) {
                    this.percent = options.percent;
                }
                if (options.status) {
                    this.status = options.status;
                }
                if ('show' in options) {
                    this.show = options.show;
                }
            },
            finish () {
                this.clearTimer();
                this.update({
                    percent: 100,
                    status: 'success',
                    show: true
                });
                this.hide();
            },
            error () {
                this.clearTimer();
                this.update({
                    percent: 100,
                    status: 'error',
                    show: true
                });
                this.hide();
            },
            hide() {
                let _this=this;
                setTimeout(() => {
                    _this.update({
                        show: false
                    });
                    setTimeout(() => {
                        _this.update({percent: 0});
                    }, 200);
                }, 800);
            },
            destroy () {
                this.clearTimer();
                document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0]);
            },
            clearTimer(){
                if (this.timer) {
                    this.clearInterval(this.timer);
                    this.timer = null;
                }
            },
        }
    };
</script>
